<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" :modal="true" :fullscreen="true" append-to-body>
      <div slot='header' class='clearfix'>
        <span>运行日志</span>
        <button v-if="!stopFile" @click="ffx">{{ butname }}</button>
        <div style='float: right' @click='loggerstop = !loggerstop' v-text='loggerstop ? "停止滚动" : "滚动"'></div>
      </div>
      <div>
        <codemirror-ex ref='logger' :scrool='loggerstop' v-model='logercode' :options='loggerOptions'
          @input='loggerChange'></codemirror-ex>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import codemirrorEx from '@/components/CodemirrorEx'
import 'codemirror/lib/codemirror.css'
// JSON代码高亮需要由JavaScript插件支持
import 'codemirror/mode/javascript/javascript.js'
// 选择IDEA主题样式，还有其他很多主题可选
import 'codemirror/theme/idea.css'
// 支持使用Sublime快捷键
import 'codemirror/keymap/sublime.js'
// 搜索功能的依赖
import 'codemirror/addon/dialog/dialog.js'
import 'codemirror/addon/dialog/dialog.css'
// 支持搜索功能
import 'codemirror/addon/search/search'
import 'codemirror/addon/search/searchcursor.js'
// 支持各种代码折叠
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldcode.js'
import 'codemirror/addon/fold/foldgutter.js'
import 'codemirror/addon/fold/brace-fold.js'
import 'codemirror/addon/fold/comment-fold.js'
// 支持代码区域全屏功能
import 'codemirror/addon/display/fullscreen.css'
import 'codemirror/addon/display/fullscreen.js'
// 支持括号自动匹配
import 'codemirror/addon/edit/matchbrackets.js'
import 'codemirror/addon/edit/closebrackets.js'
// 支持代码自动补全
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/anyword-hint.js'
// 行注释
import 'codemirror/addon/comment/comment.js'
// JSON错误检查
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/lint/lint.js'
//及时自动更新，配置里面也需要设置autoRefresh为true
import 'codemirror/addon/display/autorefresh'
import { v4 as uuidv4 } from 'uuid'
import { getFile } from '@/api/ogg'

export default {
  name: 'logFileRead',
  components: { codemirrorEx },
  props: {
    ishow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      open: false,
      title: '运行日志',
      loggerstop: true,
      butname: '加载更多',
      logercode: '',
      num: 1,
      filePointer: 1,
      stopFile: false,
      loggerOptions: { // 语言及语法模式
        mode: 'text/html',  // 接受的类型，json xml....
        smartIndent: true, // 是否智能缩进
        styleActiveLine: true, // 当前行高亮
        lineNumbers: true, // 是否显示行数
        tabSize: 4, // Tab缩进，默认4
        // 软换行
        lineWrapping: false, // 代码折叠
        indentUnit: 2, // 缩进单位，默认2
        lint: true,
        matchBrackets: true, // 括号匹配显示
        autoCloseBrackets: true, // 输入和退格时成对
        foldGutter: true,
        autoRefresh: true,
        readOnly: 'nocursor',
        theme: 'mater'
      },
      fileId: '',
      loading: undefined
    }
  },
  mounted() {
    //初始化websocket
    this.userId = uuidv4()

  },
  destroyed: function () { // 离开页面生命周期函数

  },
  methods: {
    loggerChange(content) {

    },
    ffx() {
      if (this.butname == '正在加载中。。。') {
        return;
      }
      this.butname = '正在加载中。。。'
      getFile({ id: this.fileId, idx: this.filePointer }).then(res => {
        this.butname = '加载更多'
        if (res.code == 200) {
          this.logercode = res.logs;
          this.filePointer = res.filePointer;
          this.stopFile = res.stopFile;
        }
      })
    },
    getloading() {
      this.loading = this.$loading({
        lock: true,
        text: '正在加载...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
    },
    loadIdFile(id) {
      this.open = true;
      this.fileId = id;
      this.logercode = ''
      this.loadFile();
    },
    loadFile() {
      this.getloading();
      this.butname = '正在加载中。。。'
      getFile({ id: this.fileId, idx: 0 }).then(res => {
        this.butname = '加载更多'
        if (res.code == 200) {
          this.$refs.logger.setValues(res.logs);
          this.filePointer = res.filePointer;
          this.stopFile = res.stopFile;
        }
      }).finally(() => {
        if (this.loading) {
          this.loading.close();
          this.loading = undefined
        }
      })
    },
    initWebSocket: function () { // 建立连接
      // WebSocket与普通的请求所用协议有所不同，ws等同于http，wss等同于https
      var url = "http://localhost:8990".replace("https://", "ws://").replace("http://", "ws://") + "/flinkx/websocket/" + this.userId;
      this.websock = new WebSocket(url);
      this.websock.onopen = this.websocketonopen;
      this.websock.send = this.websocketsend;
      this.websock.onerror = this.websocketonerror;
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onclose = this.websocketclose;
    },
    // 连接成功后调用
    websocketonopen: function () {

    },
    // 发生错误时调用
    websocketonerror: function (e) {
      console.log("WebSocket连接发生错误");
    },
    // 给后端发消息时调用
    websocketsend: function (e) {

    },
    // 接收后端消息
    // vue 客户端根据返回的cmd类型处理不同的业务响应
    websocketonmessage: function (e) {
      this.logercode = e.data
    },
    // 关闭连接时调用
    websocketclose: function (e) {
      this.websock.close()
    }
  }
}
</script>
<style>
.CodeMirror {
  text-align: left !important;
}

.CodeMirror {
  text-align: left !important;
}
</style>
<style scoped></style>
